<template>
  <div class="catalogue-wrap" @click.stop>
    <Scroll vertical height="100%" :scroll-bar="false">
      <ul class="catalogue-list">
        <template v-for="(l,i) in list">
          <li v-if="l.catalog === 1" :id="'catalog-item' + i" :key="i" :class="['catalogue-item', {'catalogue-item-active': i + 1 === value}]" @click="clickItemHandle(l,i)">{{ l.catalogName }}</li>
        </template>
      </ul>
    </Scroll>
  </div>
</template>
<script>
import Scroll from '@/components/Scroll'
export default {
  name: 'Catalogue',
  components: {
    Scroll
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
    }
  },
  watch: {
    // 将元素滚动到可视区域
    value: {
      handler(n) {
        this.scrollView()
      },
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollView()
    })
  },
  methods: {
    clickItemHandle(item, i) {
      this.$emit('input', i + 1)
      this.$emit('click', item, i + 1)
    },
    scrollView() {
      if (!this.$el || !this.$isType(this.value, 'number') || (this.list.length > 0 && this.list[this.value].catalog !== 1)) return
      const ele = this.$el.querySelector(`#catalog-item${this.value}`)
      if (ele) {
        ele.scrollIntoView(false)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.catalogue-wrap{
  height: 100%;
  .catalogue-list{
    margin: 0;
    padding: 0;
    .catalogue-item{
      padding: 0 10px;
      margin: 10px 0;
      color: #fff;
      font-size: 14px;
    }
    .catalogue-item-active{
      color: #16BC83 !important;
    }
  }
}
</style>
